<template>
  <section class="complain_common_wrap">
    <div class="complain_common_cont">
      <div class="title">
        投诉信息
        <span class="titleSpan">{{ nowDate }}</span>
      </div>
      <div class="dataSection">
        <el-col :span="24">
          <el-card shadow="hover">
            <img src="../icon/yujing.svg" alt="" style="float: left; padding-right: 8px" />
            <div class="box">
              <div class="boxtop">今日广义预警：</div>
              <div class="boxbottom">{{ complaintOverviewData.total }}起</div>
            </div>
          </el-card>
        </el-col>
      </div>

      <!-- 表格 -->
      <el-table class="table_wrap" :data="complaintOverviewData.countyComplaintVoList">
        <!-- <el-table-column type="index" width="50" label="#" align="center" /> -->
        <el-table-column prop="county" label="区县" width="80" align="center" />
        <el-table-column prop="complaintCount" label="投诉量" width="80" align="center" />
        <el-table-column prop="lteSurfCount" label="4G上网数量" width="80" align="center" />
        <el-table-column prop="volteCount" label="4G通话数量" width="80" align="center" />
        <el-table-column prop="vonrCount" label="5G通话数量" width="80" align="center" />
        <el-table-column prop="nrSurfCount" label="5G上网数量" width="80" align="center" />
      </el-table>

      <el-divider></el-divider>
    </div>
  </section>
</template>

<script setup>
import { ref } from "vue";
// api相关
import { apiCommon, getNow } from "@/utils/index.js";
import * as complainApi from "@/api/complain/complain";

const nowDate = getNow();

let complaintOverviewData = ref({});

const getData = async () => {
  // 或者走接口,根据cgi获取详情
  complaintOverviewData.value = await apiCommon(
    complainApi.queryComplaintOverview
  );
  complaintOverviewData.value = complaintOverviewData.value.data;
  // console.log(complaintOverviewData.value);
};

getData();
</script>

<style lang="scss" scoped>
.complain_common_wrap {
  display: block;
  position: absolute;
  top: 70px;
  right: 32px;
  padding: 0;
  width: 506px;
  z-index: 1;

  .controlBtn {
    display: block;
    float: left;
    padding: 0;
    z-index: 1;
  }

  .complain_common_cont {
    width: 100%;
    min-height: 100px;
    max-height: 70vh;
    padding: 10px 10px 0 10px;
    /* overflow: auto; */
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    /* box-sizing: border-box; */

    :deep .table_wrap {
      margin-top: 15px;
      height: 35vh;

      .el-table__body-wrapper {
        .el-table__row {
          cursor: pointer;
        }
      }
    }

    .title {
      width: 100%;
      font-weight: bold;
      margin-bottom: 20px;

      .titleSpan {
        /* border: 1px solid #000; */
        float: right;
        margin-right: 20px;
        font-weight: 100;
        font-size: small;
      }
    }

    .box {
      // display: inline-block;
      height: 100%;
      /* padding-left: 3px; */
      display: flex;
      /* align-items: center; */

      .boxtop {
        /* height: 0%;  */
        /* margin-bottom: 10px; */
        // font-size: 16px;
        /* font-weight: bold;   */
        // color: #4b4a4a;
        margin-top: 10px;
      }

      .boxbottom {
        position: relative;
        font-size: 22px;
        color: #5c5a5a;
        top: 5px;
      }
    }

    .dataSection {
      /* margin-bottom: 20px; */

      .rowClass {
        margin-bottom: 20px;
        /* padding-left: 20px; */
      }
    }
  }
}

:deep(.el-card__body) {
  padding: 0;
}
</style>
